<template>
  <div style="display: block">
    <span style="display: block">关于我们·视频</span>
    <div class="videodiv" style="">
      <video
          width="1000"
          height="500"
          controls
          class="video"
          controlslist="nodownload"
      >
        <source :src="$cosurl + videoInfo.url" type="video/mp4"/>
        您的浏览器不支持Video标签。
      </video>
      <el-upload
          class="upload-demo"
          action="https://maisheng-1305747968.cos.ap-nanjing.myqcloud.com"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-change="befup"
          :auto-upload="false"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
      >
        <el-button size="small" type="primary">点击更改视频</el-button>
      </el-upload>
      <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          status="exception"
          v-show="pshow"
      ></el-progress>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "About",
  props: ["jwttoken"],
  data() {
    return {
      cos: {},
      percentage: 0,
      pshow: false,
      videoInfo: {},
      level: 0,
      isActive: false,
      url: '',
    };
  },
  created: function () {
    this.gettmpcos();
    this.getfileList();
  },
  methods: {

    gettmpcos: function () {
      console.log("cos");
      let that = this;
      var cos = new this.$COS({
        getAuthorization: function (options, callback) {
          console.log(options);
          console.log(callback);
          // 异步获取临时密钥
          //   $.get(
          //     "http://example.com/server/sts.php",
          //     {
          //       bucket: options.Bucket,
          //       region: options.Region,
          //     },
          //     function (data) {
          //       var credentials = data && data.credentials;
          //       if (!data || !credentials)
          //         return console.error("credentials invalid");

          //     }
          //   );

          that.$jquery.ajax({
            async: false,
            type: "GET",
            dataType: "json",
            url: that.$baseurl + "createCosTmp",
            beforeSend: function (request) {
              request.setRequestHeader("Authorization", that.jwttoken);
            },
            success: function (rtn) {
              if (rtn.code == -5) {
                that.$emit("loginstate1", -1);
              }
              if (rtn.code == 1) {
                var credentials = rtn.data && rtn.data.credentials;
                if (!rtn.data || !credentials)
                  return console.error("credentials invalid");
                callback({
                  TmpSecretId: credentials.tmpSecretId,
                  TmpSecretKey: credentials.tmpSecretKey,
                  SecurityToken: credentials.sessionToken,
                  // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                  StartTime: rtn.data.startTime, // 时间戳，单位秒，如：1580000000
                  ExpiredTime: rtn.data.expiredTime, // 时间戳，单位秒，如：1580000900
                });
              }
            },
          });
        },
      });
      console.log(cos);
      this.cos = cos;
    },
    befup: function (file, filelist) {
      // this.temp(file)
      console.log(filelist);
      // console.log(file.raw);
      let that = this;
      let key = that.randomString();
      this.cos.putObject(
          {
            Bucket: "maisheng-1305747968" /* 必须 */,
            Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
            Key: key + ".mp4" /* 必须 */,
            StorageClass: "STANDARD",
            Body: file.raw, // 上传文件对象
            onProgress: function (progressData) {
              that.pshow = true;
              console.log(progressData.percent);
              that.percentage = progressData.percent.toFixed(2) * 100;
            },
          },
          function (err, data) {
            console.log(err || data);
            if (err) {
              that.$notify.error({
                title: "错误",
                message: "上传失败",
              });
            } else {
              that.$notify({
                title: "成功",
                message: "上传成功",
                type: "success",
              });
              that.pshow = false;
              file.key = key + '.mp4';
              that.url = key + '.mp4'
              that.uploadsql()
            }
          }
      );
    },

    uploadsql: function () {
      let that = this
      this.$jquery.ajax({
        async: false,
        type: "post",
        dataType: "json",
        url: that.$baseurl + "changeAdminAboutVideo",
        data: {
          url: that.url
        },
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          setTimeout(function (){
            location.reload()
          },2000)
        },
      });
    },
    randomString: function () {
      let e = 32;
      let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      let a = t.length;
      let n = "";
      for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
      return n;
    },
    // del: function (file, fileList) {
    //   console.log(file.key);
    //   let key = file.key;
    //   console.log(fileList);
    //   this.delvideo(key);
    // },
    // delvideo: function (key) {
    //   let that = this;
    //   this.$jquery.ajax({
    //     async: false,
    //     type: "delete",
    //     dataType: "json",
    //     url: that.$baseurl + "delVideo",
    //     data: {
    //       key: key,
    //     },
    //     beforeSend: function (request) {
    //       request.setRequestHeader("Authorization", that.jwttoken);
    //     },
    //     success: function (rtn) {
    //       if (rtn.code == -5) {
    //         that.$emit("loginstate1", -1);
    //       }
    //       if (rtn.code == 1) {
    //         that.$notify({
    //           title: "成功",
    //           message: "删除成功",
    //           type: "success",
    //         });
    //         setTimeout(() => {
    //           window.location.reload();
    //         }, 1000);
    //       }
    //     },
    //   });
    // },
    getfileList: function () {
      let that = this;
      this.$jquery.ajax({
        async: false,
        type: "GET",
        dataType: "json",
        url: that.$baseurl + "getAdminAboutVideo",
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            that.videoInfo = rtn.data;
          } else {
            ElMessage.error(rtn.msg)
          }
        },
      });
    },

  },
}
</script>

<style scoped>
.video {
  display: block;
  object-fit: fill;
}

.videodiv {
  display: inline-block;
  margin-left: 10%;
}

.delvideo {
  display: inline-block;
  text-align: center;
}

.el-icon-refresh {
  width: 100px;

}

.el-icon-refresh:hover {
  color: red;

}

.flushcls {
  /*transform: rotate(300deg) ;*/
  /*transform-style:preserve-3d;*/
  animation: turn 1s linear infinite;

}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
.upload-demo{
  display: block;
  margin-top: 5%;
}

</style>
